<template>

<scroll-view scroll-y="true" :scroll-top="scrollTop" class="order1" @scroll="PageScroll" style="height: 100vh" >
	<order-page-skeleton v-if="loadingskeleton"></order-page-skeleton>
	<view v-else>
		<view >
		  <view v-if="ordercloseShow" @click="orderclose" class="orderclose">
		  	<uni-icons type="arrowleft" size="30" color="#5e5e5e"></uni-icons>
		  </view>
		  <view v-else  class="orderclosescroll" :style="orderclosescrollcolor">
			  <view @tap="orderclose" class="ordercloseicon">
			  	<uni-icons type="arrowleft" size="30" color="#5e5e5e"></uni-icons>
			  </view>
			  <view></view>
			  <view>
				  {{data}}
			  </view>
			  <view></view>
		  	
		  </view>
		 </view>
		  <!-- 轮播图banner -->
		  <swiper :autoplay="true" :interval="5000" :duration="500" :indicator-dots="true" class="swiper-box swiper-box-order">
		    <block v-for="(item, index) in swiperImgs" :key="index">
		      <swiper-item>
		        <image :src="item.imgUrl" class="slide-image swiper-box-order"></image>
		      </swiper-item>
		    </block>
		  </swiper>
			
		  <view class="order-about">
				<view class="roomtype" @change="changeIndicatorDots()">{{rdata.roomtype}}</view>
				<view class="order-about-top">
					<view class="order-about-top-text"  ><f>面积：</f>{{rdata.Area}}</view>
					<view class="order-about-top-text"><f>剩余：</f>{{rdata.Floor}}</view>
					<view class="order-about-top-text"><f>窗户：</f>{{rdata.Window}}</view>
					<view class="order-about-top-text"><f>床数：</f>{{rdata.BedNum}}</view>
					<view class="order-about-top-text"><f>床型：</f>{{rdata.People}}</view>
					<view class="order-about-top-text"><f>吸烟：</f>{{rdata.Smok}}</view>
					<view class="order-about-top-text"><f>宽带：</f>{{rdata.Broadband}}</view>
				</view>
				<view class="hr"></view>
			  <view class="order-about-main">
					<text class="order-about-main-text">政策与服务</text>
					
				</view>
		  </view>
			
		  <view class="orderbtn" v-show="orderbtn">
			  <button class="orderbtnbook" @tap="bookpage">立即预定</button>
		  </view>
		</view>
	</scroll-view>
	  
</template>

<script>
	import orderPageSkeleton from "@/components/orderPage/skeleton/orderPage-skeleton.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {_getroomTypeInfo} from '../../common/vmeitime-http/roommsg.js'
	export default {
	  data() {
	    return {
		  loadingskeleton:true, //骨架屏标志位
		  swiperImgs: [],
		  toOrderRoom:{},
		   scrollTop: 0,
		   old: {
		      scrollTop: 0
		   },
		  ordercloseShow:true,
		  orderclosescrollcolor:"opacity:0.5",
		  rdata:{
						roomtype:"xxx房型",
		  		  Area:20,
						Floor:"15",
						BedNum:"1.8m×1",
						People:"2人",
						Window:"明窗",
						Smok:"禁止吸烟",
						Broadband:"独立光纤"
		  }
	    };
	  },
	
	  props: ['data','orderbtn'],
	  components: {uniIcons,orderPageSkeleton},
	  methods: {
			changeIndicatorDots(e) {
			           console.log(e)
			        },
		orderclose(){
			this.$parent.orderclose();
		},
		PageScroll(e){
			// console.log(e.detail.scrollTop)
			var scroll = e.detail.scrollTop;
			if(scroll > 30){
				this.ordercloseShow = false;
				this.orderclosescrollcolor = 'opacity:'+(scroll*0.005)
				// console.log("this.orderclosescrollcolor"+this.orderclosescrollcolor)
			}else{
				this.ordercloseShow = true;
			}
			this.old.scrollTop = scroll
		},
		bookpage(){
			this.$parent.bookpage(this.data,this.rdata.roomtype,this.toOrderRoom);
		},
		
		async roomtyperequest(){
			var roomType = {}
			this.swiperImgs.splice(0,this.swiperImgs.length)
			var range = uni.getStorageSync("day")
			var daya = range[0].year+"-"+range[0].mouth+"-"+range[0].day;
			roomType = await _getroomTypeInfo({typeId:this.data,startTime:daya})
			console.log(roomType)
			if(!roomType.data.data.imageUri){
				roomType.data.data.imageUri = "http://mss-shon.sankuai.com/v1/mss_745278b3c232430ebce6c9f550614edd/pmspublic/11_20200825162947.jpg"
			}
					var image = roomType.data.data.imageUri.split("|")
			// for (var i = 0; i < roomType.data.data.length; i++) {
			
				if(image.length>0){
					for (var i = 0; i < image.length; i++) {
						this.swiperImgs[i] = {
						  imgUrl: image[i],
						  toUrl: ''
						}
					}
				}else{
					this.swiperImgs[0] = {
					  imgUrl: image[0],
					  toUrl: ''
					}
				}
				
			// };
			this.toOrderRoom = roomType.data.data
			roomType.data.data.bedTypes = JSON.parse(roomType.data.data.bedTypes);
			if(roomType.data.data.bedTypes){
				this.rdata={
							BedNum:roomType.data.data.bedCount+' '+roomType.data.data.bedTypes[0].Desc,
							roomtype:roomType.data.data.roomTypeName,
							Area:roomType.data.data.roomArea,
							Floor:roomType.data.data.count,
							People:roomType.data.data.bedTypes[0].Name,
							Window:"明窗",
							Smok:"禁止吸烟",
							Broadband:"独立光纤"
				};
			}else{
				this.rdata={
							BedNum:roomType.data.data.bedCount,
							roomtype:roomType.data.data.roomTypeName,
							Area:roomType.data.data.roomArea,
							Floor:roomType.data.data.count,
							People:'暂无',
							Window:"明窗",
							Smok:"禁止吸烟",
							Broadband:"独立光纤"
				};
			}
			console.log(this.rdata,this.rdata.roomtype)
			this.loadingskeleton = false
		},
	
	  },
	  watch: {
	        data: function () {
				this.loadingskeleton = true
	                this.scrollTop = this.old.scrollTop
	                            this.$nextTick(function() {
	                                this.scrollTop = 0
	                            });
															this.roomtyperequest()
															// console.log(this)
															// this.current = 0
	              }
		}
	}
</script>

<style>
/* 预定页面 */

.orderpage{
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column-reverse;
	z-index: 999;
	background-color: rgb(127,127,127,0.5);
	
}

.order1{
	background-color: #fff;
	height: 100%;
	border-radius:30rpx 30rpx 0 0;
	margin-bottom: -300px;
}
.orderbtn{
	background-color: #ffffff;
	height: 10%;
	width: 100%;
	position: fixed;
	bottom: 0;
	box-shadow: 10px 10px 10px 10px rgba(9, 4, 0, 0.3);
	display: flex;
	align-items:center;
	justify-content:space-between;

}
.swiper-box-order{
	border-radius: 30rpx 30rpx 0 0;
	height: 400rpx;
}
.slide-image{
	height: 100%;
}

.orderclose{
	position: fixed;
	top: 15rpx;
	left: 10rpx;
	color: #F6F3F1;
	z-index: 999999999999;
}
.slide-image{
	width: 100%;
}

.orderclosescroll{
	position: fixed;
	width: 100%;
	height: 8%;
	z-index: 999999999999;
	background-color:rgba(255, 255, 255);
	box-shadow: 0px 0px 5px 0px rgba(9, 4, 0, 0.3);
	display: flex;
	align-items:center;
	justify-content:space-between;
}

.ordertop{
	height: 20%;
	margin-bottom: 300px;
}
.ordercloseicon{
	position: fixed;
	width: 10%;
}
.orderbtnbook{
	border-radius: 50px;
	height: 70%;
	width: 80%;
	background-color: rgb(255,207,49);
	color: #ffffff;
}
.order-about{
	
	width: 90%;
	margin: 0 auto;
}
.order-about-top{
	display: flex;
	flex-wrap:wrap;
	width: 100%;
	font-size: 25rpx;
}
.order-about-top-text{
	width: 33%;
	margin-bottom: 20rpx;
}
.order-about-top-text f{
	color: #999999;
}
.hr{
	width: 95%;
	margin: 0 auto;
	height: 3rpx;
	background-color: #e1e1e1;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}
.hrmain{
	width: 100%;
	margin: 0 auto;
	height: 2rpx;
	background-color: #666666;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.order-about-main-text{
	font-size: 32rpx;
}
.roomtype{
	font-size: 35rpx;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
}


</style>
